<template>
  <div class="hotel" v-if="hotelData">
    <!-- 面包屑 -->
    <div class="crumbs">
      <div>{{hotelData.breadcrumb}}</div>
    </div>
    <div class="hotel_content">
      <!-- 酒店左边图片展示 -->
      <div class="gs_l">
        <!-- <div class="gs_bigbox">
          <img :src="hotelData.photos" alt />
        </div>-->
        <div class="gsl_img">
          <img :src="currentBigSrc" :alt="hotelData.alias" />
        </div>
        <div class="gsl_list clearfix">
          <a href="javascript:void(0);" class="iconfont el-icon-arrow-left"></a>
          <ul>
            <!-- class="current" -->
            <li v-for="(item,index ) of hotelImgList" :key="index" @mouseenter="showBigImg(index)">
              <img :src="item.iconSrc" alt />
            </li>
          </ul>
          <a href="javascript:void(0);" class="iconfont el-icon-arrow-right"></a>
        </div>
        <div class="gsl_txt">
          <a href="#" @click.prevent="starHotel" :class="isStart?'redActive':''">
            <span class="iconfont el-icon-star-on"></span>收藏
          </a>
          <a href="#" @click.prevent="shareHotel">
            <span class="iconfont el-icon-share"></span>分享
          </a>
          <a href="#" @click.prevent="jumpToplic">举报</a>
        </div>
      </div>
      <!--  酒店详情 右边文字-->
      <div class="gs_m" v-loading="loading">
        <h2>{{hotelData.name}}</h2>
        <div class="hotel_condition">
          <p v-for="(item,index) of hotelCondition" :key="index">
            <i class="iconfont el-icon-star-on"></i>
            {{item}}
          </p>
        </div>
        <!-- 信息详情 -->
        <div class="hotel_detail">
          <div class="price">
            <span class="title">价格：</span>
            <span class="msg">
              <i class="doller">￥</i>
              {{singlePrice}}.00
            </span>
            <div class="wrap">
              <div class="price_detail">
                <span class="p_span">月销量</span>
                <br />
                <span class="p_val">{{hotelData.visits_month}}</span>
              </div>
              <div class="price_detail">
                <span class="p_span">访问总计</span>
                <br />
                <span class="p_val">{{hotelData.visits_total}}</span>
              </div>
              <div class="price_detail">
                <span class="p_span">好评率</span>
                <br />
                <span
                  class="p_val"
                >{{hotelData.very_good_remarks/(hotelData.very_bad_remarks+hotelData.very_good_remarks)*100 | formatNumber}}%</span>
              </div>
            </div>
          </div>
          <div class="roomtype">
            <span class="title">房型：</span>
            <span
              class="types samebox"
              :class="secType==index?'active':''"
              @click="selcTypes(index)"
              v-for="(item,index) in roomTypes"
              :key="index"
            >{{item.name}}</span>
          </div>
          <div class="promise">
            <span class="title">承诺服务：</span>
            <span class="servic samebox" v-for="(item,index) of serviceList" :key="index">
              <i class="iconfont el-icon-check"></i>
              {{item}}
            </span>
          </div>
          <div class="address">
            <span class="title">地址：</span>
            <span class="address_i samebox">{{hotelData.address}}</span>
          </div>
        </div>
        
        <!-- 电话预定 -->
        <div class="callBook">
          <button @click.stop="submitOrder()">预定</button>
          <span>预约电话：{{hotelData.phone}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  filters: {
    formatNumber: function (val) {
      return parseInt(val);
    },
  },
  data() {
    return {
      loading: false,
      hotelData: {},
      currentBigSrc: "",
      hotelImgList: [
        {
          iconSrc:
            "https://img.alicdn.com/bao/uploaded/i3/2208453626674/O1CN01NfZs1G1zAjxTV3ekY_!!2208453626674.jpg_64x64.jpg",
          showSrc:
            "https://img.alicdn.com/bao/uploaded/i3/2208453626674/O1CN01NfZs1G1zAjxTV3ekY_!!2208453626674.jpg_430x430xz.jpg",
        },
        {
          iconSrc:
            "https://img.alicdn.com/bao/uploaded/i4/2208453626674/O1CN01jEV4Ac1zAjx3zkgeL_!!2208453626674.jpg_64x64.jpg",
          showSrc:
            "https://img.alicdn.com/bao/uploaded/i4/2208453626674/O1CN01jEV4Ac1zAjx3zkgeL_!!2208453626674.jpg_430x430xz.jpg",
        },
        {
          iconSrc:
            "https://img.alicdn.com/bao/uploaded/i1/2208453626674/O1CN01mUMkXy1zAjx8hD0af_!!2208453626674.jpg_64x64.jpg",
          showSrc:
            "https://img.alicdn.com/bao/uploaded/i1/2208453626674/O1CN01mUMkXy1zAjx8hD0af_!!2208453626674.jpg_430x430xz.jpg",
        },
        {
          iconSrc:
            "https://img.alicdn.com/bao/uploaded/i1/2208453626674/O1CN01y75jaB1zAjx4SxqLe_!!2208453626674.jpg_64x64.jpg",
          showSrc:
            "https://img.alicdn.com/bao/uploaded/i1/2208453626674/O1CN01y75jaB1zAjx4SxqLe_!!2208453626674.jpg_430x430xz.jpg",
        },
        {
          iconSrc:
            "https://img.alicdn.com/bao/uploaded/i4/2208453626674/O1CN01jEV4Ac1zAjx3zkgeL_!!2208453626674.jpg_64x64.jpg",
          showSrc:
            "https://img.alicdn.com/bao/uploaded/i4/2208453626674/O1CN01jEV4Ac1zAjx3zkgeL_!!2208453626674.jpg_430x430xz.jpg",
        },
      ],
      singlePrice: 138,
      secType: 0,
      isStart: false,
      hotelCondition: [
        "24小时在线营业",
        "提前预定，提前入住",
        "节假日通用",
        "安心优选",
      ],
      roomTypes: [
        {
          name: "标准单人间",
          price: 138,
        },
        {
          name: "双人间",
          price: 168,
        },
        {
          name: "温馨亲子房",
          price: 156,
        },
        {
          name: "浪漫电影房",
          price: 248,
        },
        {
          name: "豪华大床房",
          price: 198,
        },
      ],
      serviceList: ["安心住", "拎包入住", "安全消毒"],
    };
  },
  watch: {
    data: {
      handler(val) {
        console.log("----酒店详情信息组件接收父组件传递过来的值:----");
        this.hotelData = val;
        this.currentBigSrc = this.hotelData.photos;
        this.hotelImgList[0].showSrc = this.hotelData.photos;
        this.hotelImgList[0].iconSrc = this.hotelData.photos;
        console.log(this.hotelData);
      },
      deep: true,
      immediate: true,
    },
  },
  mouted() {},
  methods: {
    // 移入显示对应图片
    showBigImg(index) {
      console.log("显示大图：" + index);
      this.currentBigSrc = this.hotelImgList[index].showSrc;
    },
    // 收藏方法
    starHotel() {
      this.isStart = !this.isStart;
    },
    // 分享
    shareHotel() {
      this.$message({
        message: "暂时不支持分享",
        type: "warning",
      });
    },
    // 举报
    jumpToplic() {
      this.$message({
        message: "已提交给相关部门审核！",
        type: "success",
      });
    },
    // 选择房型
    selcTypes(index) {
      this.secType = index;
      this.singlePrice = this.roomTypes[index].price;
    },
    // 预定
    submitOrder() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message({
          message: "预定成功！可以返回个人中心查看我的订单哦！",
          type: "success",
        });
      }, 1300);
    },
  },
};
</script>
<style lang="less" scoped>
.hotel {
  .active {
    border: 1px solid rgb(246, 47, 47) !important;
  }
  // padding-bottom: 50px;
  // 面包屑
  .crumbs {
    font-size: 14px;
    margin: 10px 0;
  }
  .hotel_content {
    display: flex;
    .gs_l {
      flex: 4;
      font-size: 14px;
      img {
        width: 20px;
      }
      position: relative;
      width: 352px;
      height: 479px;
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 236.25px;
        height: 236.25px;
        border: 1px solid #aaa;
        background: 50% top no-repeat #fede4f;
        opacity: 0.5;
        cursor: move;
        display: none;
      }

      .gs_bigbox {
        position: absolute;
        top: 0;
        left: 350px;
        width: 540px;
        height: 540px;
        border: 1px solid #e4e4e4;
        overflow: hidden;
        display: none;
      }

      .gs_bigbox img {
        position: absolute;
        width: 100%;
      }

      .gsl_img {
        position: relative;
        width: 350px;
        height: 350px;
        border: 1px solid #eeeeee;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .gsl_img i {
        display: inline-block;
        width: 30px;
        height: 30px;
        color: white;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        line-height: 30px;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #cccccc;
      }

      .gsl_list {
        width: 352px;
        height: 54px;
        margin-top: 20px;
      }

      .gsl_list a {
        float: left;
        width: 40px;
        height: 54px;
        line-height: 54px;
        color: #dfdfdf;
        font-size: 44px;
        font-weight: 700;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .gsl_list ul {
        float: left;
      }

      .gsl_list ul li {
        float: left;
        width: 50px;
        height: 50px;
        border: 2px solid transparent;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .gsl_list ul .current {
        border: 2px solid #e53e41;
      }

      .gsl_list ul li:hover {
        border: 2px solid #e53e41;
      }

      .gsl_txt {
        color: #666666;
        padding: 20px 10px;
      }

      .gsl_txt a {
        margin-left: 5px;
      }

      .gsl_txt a:hover {
        color: #e3393c;
      }
      .redActive {
        color: #e3393c;
      }

      .gsl_txt a:last-child {
        float: right;
      }
    }

    .gs_m {
      flex: 7;
      width: 590px;
      // margin-top: 12px;
      margin-left: 30px;
      box-sizing: border-box;
      color: #666666;
      font-size: 12px;
      img {
        width: 20px;
      }
      h2 {
        font: 700 24px Arial, "microsoft yahei";
        color: #666;
      }
      .hotel_condition {
        width: 100%;
        margin-top: 10px;
        padding: 10px 20px;
        background: #f8f8f8;
        border-radius: 2px;
        p {
          line-height: 22px;
          font-size: 14px;
          .iconfont {
            color: #ffb200;
          }
        }
      }
      // 详情
      .hotel_detail {
        margin-top: 10px;
        .price {
          line-height: 70px;
          position: relative;
          background-image: linear-gradient(to right, white, #ffe7b2);
          .msg {
            font-size: 24px;
            color: rgb(251, 54, 54);
            font-weight: 600;
            .doller {
              font-size: 14px;
              font-weight: 400;
            }
          }
          .wrap {
            line-height: 35px;
            position: absolute;
            right: 80px;
            top: 0px;
            width: 150px;
            display: flex;
            justify-content: space-between;
            > div {
              text-align: center;
              .p_val {
                color: rgb(248, 61, 15);
                font-size: 16px;
                font-weight: 500;
              }
            }
          }
        }
        > div {
          margin-top: 10px;
          .title {
            font-size: 14px;
          }
          .samebox {
            font-size: 16px;
          }

          .types {
            cursor: pointer;
            font-size: 14px;
            border: 1px solid rgb(167, 167, 167);
            padding: 3px;
            margin-left: 15px;
          }
        }
        .promise {
          .servic {
            margin-left: 5px;
            vertical-align: middle;
            .iconfont {
              color: rgb(34, 219, 34);
            }
            font-size: 12px;
          }
        }
      }
      .circle {
      margin-top: 10px;
      display: flex;
      .environment {
        position: relative;
        margin-right: 50px;
        .grade {
          position: absolute;
          left: 19px;
          top: 13px;
          text-align: center;
          color: #ff9900;
        }
      }
    }
      // 预定
      .callBook {
        margin: 40px 0px;
        button {
          font-size: 24px;
          width: 120px;
          height: 50px;
          color: #fff;
          background: red;
          border: none;
          border-radius: 5px;
          outline: none;
          cursor: pointer;
          &:active {
            font-size: 22px;
            border: 1px solid #fff;
          }
        }
        span {
          font-size: 22px;
          font-weight: 500;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>